<template>
  <div class="users-manage">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="学号">
          <el-input v-model="filterForm.no" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="filterForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 用户列表 -->
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="头像" width="80">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120" />
        <el-table-column prop="no" label="学号" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { apiFindUsers } from '@/request/admin'


// 筛选表单数据
const filterForm = reactive({
  no: '',
  email: ''
})

// 表格数据
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取用户列表数据
const fetchUserList = async () => {
  try {
    const res = await apiFindUsers({
      page: currentPage.value,
      pageSize: pageSize.value,
      ...filterForm
    })
    tableData.value = res.data.users
    total.value = res.data.total
  } catch (error) {
    ElMessage.error('获取用户列表失败')
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchUserList()
}

// 重置表单
const resetForm = () => {
  filterForm.no = ''
  filterForm.email = ''
  handleSearch()
}


// 删除用户
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该用户吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      // 实现删除用户的API调用
      ElMessage.success('删除成功')
      fetchUserList()
    })
    .catch(() => {})
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchUserList()
}

// 页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchUserList()
}

// 页面加载时获取数据
onMounted(() => {
  fetchUserList()
})
</script>

<style scoped>
.users-manage {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;  /* 减小最大宽度，使内容更紧凑 */
  margin: 0 auto;     /* 确保整体居中 */
}

.filter-section {
  width: 100%;    
  background-color: #fff;
  padding: 24px;    /* 增加内边距 */
  border-radius: 8px;  /* 增加圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); 
  margin-bottom: 24px;  /* 增加底部间距 */
}

.filter-form {
  display: flex;
  align-items: center;
  justify-content: center;  
  flex-wrap: wrap;      
  gap: 16px;    /* 增加表单项之间的间距 */        
}

.table-container {
  width: 100%;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

/* 表格容器样式 */
.el-table {
  width: 100% !important;
  --el-table-border-color: #ebeef5;  /* 自定义表格边框颜色 */
}

/* 分页容器样式 */
.pagination {
  width: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
}

:deep(.el-table) {
  border-radius: 4px;
  overflow: hidden;  /* 确保圆角生效 */
}

:deep(.el-pagination) {
  justify-content: center;  /* 确保分页居中 */
}

:deep(.el-form-item) {
  margin-bottom: 0;  /* 移除表单项底部边距 */
}
</style>
